<template>
    <div class="transfer-manage">
        <div class="map-block">
            <img src="@/assets/images/map-tun.png" alt="" />
        </div>
        <div class="transfer-info">
            <div class="diy-select">
                <div class="select">
                    <img class="fl" src="@/assets/images/icon-pos.png" alt="" />
                    <span class="select-word">保集广场北</span>
                    <!-- 切换家active -->
                    <span class="icon-arraw active"></span>
                </div>
            </div>
            <div class="info">
                <div class="info-title-line">
                    站点信息
                </div>
                <div class="info-box">
                    <div class="title">保集广场北</div>
                    <div class="clearfix info-line">
                        <div class="fl label icon-pos">位置：</div>
                        <div class="word">浙江省金华市保集广场北门</div>
                    </div>
                    <div class="clearfix info-line">
                        <div class="fl label icon-rl">容量：</div>
                        <div class="word">1T</div>
                    </div>
                    <div class="clearfix info-line">
                        <div class="fl label icon-pp">负责人：</div>
                        <div class="word">杨少华</div>
                    </div>
                    <div class="clearfix info-line">
                        <div class="fl label icon-zh">电话：</div>
                        <div class="word">18888888888</div>
                    </div>
                    <div class="clearfix info-line">
                        <div class="fl label icon-xs">消杀：</div>
                        <div class="word">
                            <span>今日已消杀</span>
                            <span>09:00</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="chart-box">
                <p class="title">本月回收量趋势图</p>
                    <div class="chart" id="chart"></div>
            </div>
            <div class="pic-block">
                <div class="title">
                    <span class="icon-sp">当前位置：</span>
                    <span>保集广场北门</span>
                </div>
                <div class="pic-box">
                    <img src="@/assets/images/pic.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        // 本月回收量趋势图
        const self = this
        const chartOption = {
            title: {
                text: '单位 kg',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: '#a6d5f6' //标题颜色
                },
                top: '10px',
                left: '3%'
            },
            grid: {
                left: '3%',
                top: '50px',
                right: '3%',
                bottom: '20px',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#a6d5f6'
                        }
                    },
                    axisLabel: {
                        interval: 0, //设置x轴的标签显示可自适应
                        show: true,
                        textStyle: {
                            color: '#a6d5f6'
                        }
                    },
                    //
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                }
            ],
            yAxis: [
                {
                    type: 'value',

                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true, //y轴线
                        lineStyle: {
                            color: '#a6d5f6'
                        }
                    },
                    axisLabel: {
                        // margin: 10,
                        textStyle: {
                            fontSize: 12,
                            color: '#a6d5f6'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '进入',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 2,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: '#3bb5fe'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: self.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,192,255,0.4)'
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(0,192,255,0.4)'
                                    },
                                    {
                                        offset: 0.8,
                                        color: 'transparent'
                                    }
                                ],
                                false
                            ),
                            shadowBlur: 30
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#1ee0e4',
                            borderColor: '#1ee0e4',
                            borderWidth: 0
                        }
                    },

                    data: [50, 80, 40, 90, 60, 80, 50, 50, 80, 40, 90, 60]
                }
            ]
        }
        const chart = self.$echarts.init(document.getElementById('chart'))
        chart.setOption(chartOption, true)
    }
}
</script>

<style lang="less" scoped></style>
